<template>
  <div class="app-container">
    <el-card shadow="always">
      <div class="title">
        <span />
        <p>查询条件</p>
      </div>

      <el-form :model="seachForm" label-width="120px">
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="文件名称：">
              <el-input
                v-model="seachForm.fileName"
                placeholder="请输入文件名称"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24" style="text-align: right">
            <el-button type="primary" @click="getInit(1)">查询</el-button>
            <el-button @click="rest">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="always" style="margin-top: 15px">
      <div class="title">
        <span />
        <p>文件列表</p>
      </div>

      <TableView
        :data-list="fileList"
        :loading="loading"
        :total="seachForm.total"
        :size="seachForm.size"
        :page="seachForm.page"
        @pagination="pagination"
      >
        <div slot="column">
          <el-table-column
            label="上传时间"
            align="center"
            prop="createTime"
            width="200"
            show-overflow-tooltip
          />

          <el-table-column
            label="文件名"
            align="center"
            prop="fileName"
            show-overflow-tooltip
          />

          <el-table-column label="文件预览" align="center">
            <template slot-scope="scope">
              <img
                v-if="scope.row.fileType.includes('image')"
                :src="scope.row.imageBase64"
                alt=""
                style="width: 100px; height: 100px; border-radius: 10px"
              >

              <span v-else>---</span>
            </template>
          </el-table-column>

          <el-table-column
            label="文件大小"
            align="center"
            prop="fileSize"
            width="100"
            show-overflow-tooltip
          />

          <el-table-column
            label="操作"
            align="center"
            width="100"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="delFile(scope.row)"
              >删除</el-button>
              <el-button
                type="text"
                @click="doneFile(scope.row)"
              >下载</el-button>
            </template>
          </el-table-column>
        </div>
      </TableView>
    </el-card>
  </div>
</template>

<script>
import { deleteFile, doneFile, getUploadedFiles } from '@/api/chuizi'
import TableView from '@/components/TableView/index.vue'
import Item from '@/layout/components/Sidebar/Item.vue'
export default {
  components: {
    TableView
  },
  data() {
    return {
      fileList: [],
      loading: false,
      seachForm: {
        page: 1,
        size: 10,
        total: 0
      }
    }
  },

  mounted() {
    this.getInit()
  },

  methods: {
    async getInit(page) {
      this.seachForm.page = page || this.seachForm.page
      this.loading = true
      const res = await getUploadedFiles(this.seachForm)
      if (res.code == 20000) {
        this.fileList = res.data || []
        this.seachForm.total = res.total
      } else {
        this.$message.error(res.msg)
      }
      this.loading = false
    },

    rest() {
      this.seachForm = {}
      this.getInit()
    },

    pagination(e) {
      this.seachForm = e
      this.getInit()
    },

    // 点击删除按钮
    delFile(row) {
      this.$confirm('确定删除当前文件吗？', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(async() => {
        const res = await deleteFile({ fileId: row.fileId, id: row.id })

        if (res.code == 20000) {
          this.$message.success('删除成功')
          this.getInit()
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 点击下载按钮
    doneFile(row) {
      this.$confirm('确定下载当前文件吗？', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(async() => {
        const res = await doneFile({ fileId: row.fileId })

        const url = window.URL.createObjectURL(new Blob([res]), {
          type: 'application/octet-stream'
        })
        const link = document.createElement('a')

        link.style.display = 'none'
        link.href = url
        const fileName = `${row.fileName.split('.')[0]}.${
          row.fileType.split('/')[1]
        }`
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },

    // 选择表格
    selectionChange(e) {
      this.selectTable = e
    }
  }
}
</script>

<style></style>
